<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle" width="80%">
    <el-table
      v-loading="loading"
      :data="list"
      border
      stripe
      :header-cell-style="{ background: '#F3F4F7', color: '#555' }"
    >
      <el-table-column label="编号" align="center" width="60" fixed="left">
        <template #default="{ $index }">
          {{ $index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        label="标段号"
        align="center"
        prop="markCode"
        min-width="150"
        fixed="left"
        :show-overflow-tooltip="true"
      />
      <el-table-column label="产品名称" align="center" prop="coalName" min-width="150">
      </el-table-column>
      <el-table-column label="起拍价格(元/吨)" align="center" prop="startingPrice" width="150" />
      <el-table-column label="中标价格(元/吨)" align="center" prop="bidPrice" width="150">
        <template #default="{ row }">
          <span class="text-red-700">{{ row.bidPrice }}</span>
        </template>
      </el-table-column>
      <el-table-column label="中标量(吨)" align="center" prop="bidAmount" width="150" />
      <el-table-column label="拉运量(吨)" align="center" prop="transportAmount" width="150" />
      <el-table-column
        label="中标客户"
        align="center"
        prop="customerName"
        min-width="150"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="竞拍时间(开始)"
        align="center"
        prop="startTime"
        min-width="200"
        :formatter="dateFormatter"
      />
      <el-table-column
        label="竞拍时间(结束)"
        align="center"
        prop="endTime"
        min-width="200"
        :formatter="dateFormatter"
      />
    </el-table>
    <div class="flex justify-center">
      <el-form
        ref="formRef"
        v-loading="formLoading"
        :model="formData"
        :rules="formRules"
        label-width="150"
        class="mt-50px w-500px"
      >
        <el-form-item label="履约扣款(元)" prop="agreementDeduct">
          <el-input
            :maxlength="10"
            v-model="formData.agreementDeduct"
            placeholder="请输入履约扣款"
          />
        </el-form-item>
        <el-form-item label="扣款原因">
          <el-input v-model="formData.deductReason" :maxlength="100" placeholder="请输入扣款原因" />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script lang="ts" setup>
import { validateTransAmount } from '@/utils/validatorUtil'
import * as performance from '@/api/performance'
import { dateFormatter } from '@/utils/formatTime'
import * as Utils from '@/utils/dict'

const { DICT_TYPE, getDictLabel } = reactive(Utils)
const emit = defineEmits(['success'])
const formRef = ref()
const { t } = useI18n()
const message = useMessage()
const dialogVisible = ref(false)
const dialogTitle = ref('')
const loading = ref(false)
const formLoading = ref(false)
const list = ref([])
const formData: Record<string, any> = ref({
  agreementDeduct: 0,
  deductReason: undefined
})
const rowItem = ref()
const formRules = reactive({
  agreementDeduct: [{ validator: validateTransAmount, trigger: 'blur' }]
})

const open = async (data) => {
  resetFn()
  dialogVisible.value = true
  dialogTitle.value = '履约处理'
  console.log(data)
  rowItem.value = data
  getBySectionIds()
}

const getBySectionIds = async () => {
  try {
    loading.value = true
    const data = await performance.getBySectionIds({ sectionIds: rowItem.value?.sectionIds })
    list.value = data
  } finally {
    loading.value = false
  }
}

const submitForm = async () => {
  if (!formRef) return
  const valid = await formRef.value.validate()
  if (!valid) return
  try {
    formLoading.value = true
    await performance.handleAgreement({ id: rowItem.value?.id, ...formData.value })
    message.success(t('common.operateSuccess'))
    dialogVisible.value = false
    resetFn()
    emit('success')
  } finally {
    formLoading.value = false
  }
}

const resetFn = () => {
  formData.value = {
    agreementDeduct: 0,
    deductReason: undefined
  }
  formRef.value?.resetFields()
}

defineExpose({ open })
</script>
